<template>
  <el-dialog title="用户信息" :visible.sync="showDialog" width="900px">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-avatar :src="user.avatar" :size="64" />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">昵称：{{ user.nickname }}</el-col>
      <el-col :span="8">账号：{{ user.username }}</el-col>
      <el-col :span="8">手机号：{{ user.phone_number }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">性别：{{ user.sex | sex }}</el-col>
      <el-col :span="8">UUID: {{ user.uuid }}</el-col>
      <el-col :span="8">注册时间：{{ user.create_time }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">是否VIP：{{ user.is_vip === '1' ? '会员' : '非会员' }}</el-col>
      <el-col :span="8">VIP到期时间：{{ user.expire_time }}</el-col>
      <el-col :span="8">余额：¥{{ user.balance }}</el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { mapActions } from 'vuex'
import { UserActionsEnum } from '../_/vue/store/user'
export default {
  props: {
    value: Boolean,
    uuid: [Number, String]
  },
  data () {
    return {
      showDialog: this.value,
      user: {}
    }
  },
  watch: {
    value (val) {
      this.showDialog = val
    },
    showDialog (val) {
      this.$emit('input', val)
    }
  },
  async mounted () {
    try {
      const resp = await this.detail(this.uuid)
      this.user = resp.data
    } catch (err) {
      this.showDialog = false
    }
  },
  methods: {
    ...mapActions({
      detail: UserActionsEnum.INFO
    })
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  margin-bottom: 15px;
}
</style>
